<template>
  <div class="header-swiper">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="item in banners" :key="item.id">
        <img :src="item.imgUrl" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default ({
  data() {
    return {
      banners: [
        {
          id: '01',
          imgUrl: require('@/assets/img/0001.jpg')
        }, {
          id: '02',
          imgUrl: require('@/assets/img/0002.jpg')
        }, {
          id: '03',
          imgUrl: require('@/assets/img/0003.jpg')
        }
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: true
      }
    }
  },
  mounted() {

  }
})
</script>

<style lang="less" scoped>
.header-swiper {
  background: #ccc;
  height: 0;
  padding-bottom: 26.67%;

  img {
    width: 100%;
    height: 2rem;
  }

  & /deep/ .swiper-pagination-bullet-active {
    background: #fff;
  }
}
</style>
